<!DOCTYPE html  >
<html
    onload="init()"
    onkeypress="processKey(event)"
>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        >
        <link rel="stylesheet" type="text/css" href="./styles/index.css">
    </head>
    <body>
        <div
            id="hand_button"
            class="fullScreen"
        >
            <video
                id="mainVideo"
                class="fullScreen"
                onended="mainVideoEnded()" 
            >
                <source
                    src="./assets/lottery.new.mp4"
                    type="video/mp4"
                >
            </video>
            <div id="displayResultWrap">
                <div id="displayResult"></div>
            </div>
        </div>
        <!-- <div
            id='wrapCanvas'
            class="fullScreen"
            onclick="testAnime()"
        ></div> -->
        <script src="./script/wordcloud2.js"></script>
        <script src="./script/lotter-core.js"></script>
        <script src="./script/lotterD.js"></script>
        <script src="./script/index.js"></script>
        <script>
            function testAnime(){
                var intervalCallback = -1;
                function test(){
                    var canvasElements = document.getElementsByTagName('canvas')
                    var parentElement = document.querySelector('#wrapCanvas'); 
                    var mirrorDivList = [];
                    for (const elementIndex in canvasElements) {
                        if (canvasElements.hasOwnProperty(elementIndex)) {
                            const item = canvasElements[elementIndex];
                            var mirrorDiv = document.createElement('div');
                            mirrorDiv.style = item.style;  
                            mirrorDiv.classList.add('canvasItemWrap')
                            setStyle(item.style,mirrorDiv.style)
                            item.style['display']='none'
                            mirrorDiv = reloadClipCanvas(mirrorDiv,item)
                            parentElement.appendChild(mirrorDiv) 
                            var mirCollection=[]
                            for (let mirrorDivChildrenIndex = 0; mirrorDivChildrenIndex < mirrorDiv.childNodes.length; mirrorDivChildrenIndex++) {
                                var childCanvas = mirrorDiv.children[mirrorDivChildrenIndex];
                                mirCollection.push(childCanvas)  
                            }
                            mirrorDivList.push(mirCollection)
                        }
                    }
                    intervalCallback= setInterval(()=>{
                         if(mirrorDivList.length==0){
                             clearInterval(intervalCallback)
                         }
                         var tmpMirDicList =  mirrorDivList.slice(0,9)
                         for (let mirListIndex = 0; mirListIndex < tmpMirDicList.length; mirListIndex++) {
                             const item = tmpMirDicList[mirListIndex];
                             if(item.length<1){
                                tmpMirDicList.splice(mirListIndex,1)
                                return;
                             }
                             var tmpProcessArr= item.splice(0,5)
                             if(tmpProcessArr){
                                for (const key in tmpProcessArr) {
                                 if (tmpProcessArr.hasOwnProperty(key)) {
                                     const item= tmpProcessArr[key];
                                     item.style['display']='inline-block'
                                 }
                                }
                             } 
                         }
                    },500)
                }
                // setTimeout(test,1000)
            } 
            function isInteger(obj) {
                return typeof obj === 'number' && obj%1 === 0
            }
            function setStyle(src,dst){
                for (const styleItemKey in src) {
                    if (src.hasOwnProperty(styleItemKey)) {
                        var intValue=parseInt(styleItemKey)
                        if(!isNaN( intValue)){
                            const styleItem = src[intValue];
                            dst[styleItem]= src[styleItem] 
                        } else{
                            break;
                        }
                    }
                }
            }
            function reloadClipCanvas(container,canvas){
               var clipNumbers = canvas.width;
               var widthLength = canvas.width/clipNumbers;
               for (let index = 0; index < clipNumbers; index++) {
                    var _canvas = document.createElement('canvas')
                    _canvas.height = canvas.height;
                    _canvas.width = widthLength;
                    _canvas.style['display'] ='none'
                    var _height = canvas.height;
                    var _context = _canvas.getContext('2d');
                    _context.drawImage(canvas
                    ,widthLength*index,0,widthLength,_height
                    ,0,0,widthLength,_height) 
                    container.appendChild(_canvas)     
               }
               return container;
           }
        </script>
    </body>
</html>
